<template>
  <div class="items">
    <div class="items-left">
      <div>
        <div
          v-for="(item, index) in xdatalist"
          :key="index"
          @click="clickleft(index, item.name)"
          :class="{ selected: index == curindex, list: true }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="items-right">
      <div>
        <div v-for="(item, index) in xdatalist" :key="index" :id="item.name">
          <p>{{ item.name }}</p>
          <div v-for="(item, index) in item.foods" :key="index">
            <div style="display: flex; padding: 10px; background: #fff">
              <img
                @click="showUp(item)"
                :src="item.imgUrl"
                style="width: 80px; height: 80px; margin-right: 10px"
              />
              <div style="display: flex; flex-direction: column;flex:1">
                <h5 class="mb5">{{ item.name }}</h5>
                <van-tag plain type="primary" style="width: 26px" class="mb5"
                  >标签</van-tag
                >
                <span class="mb5"
                  ><span style="margin-right: 10px" class="fs14"
                    >月售{{ item.sellCount }}份</span
                  ><span class="fs14">好评度{{ item.rating }}%</span></span
                >
                <span style="display: flex; justify-content: space-around">
                  <span style="color: red;" class="f14">￥{{ item.price }} </span>
                  <span style="text-decoration: line-through; color: #333;" class="f14" >￥93.40</span>
                  <!-- 数量加减 -->
               <div class="dpflex alcenter">
                   <span class="btnnum btnumleft" v-show="item.num>0" @click="clickred(item.id)">-</span>
                  <span v-show="item.num>0" class="f14 ml5">{{item.num}}</span>
                  <span class="btnnum btnumright ml5" @click="clickadd(item.id)"> +</span>
               </div>
                  
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 遮罩 -->
    <van-overlay :show="show" >
      <div class="wrapper" @click="show = false">
        <div class="block">
          <img :src="infor.imgUrl" alt="" style="width: 100%; height: 150px" />
          <h3 class="mb6">{{ infor.name }}</h3>
          <p style="color: #bcbcbc" class="mb10">
            月售{{ infor.sellCount }}
            <span class="ml5">好评率{{ infor.rating }}%</span>
          </p>
          <div
            style="color: red; display: flex; justify-content: space-between"
          >
            <span
              >￥<span style="font-size: 34px">{{ infor.price }}</span></span
            >
            <div class="shoping-cart">
              <van-icon name="shopping-cart" />
              加入购物车
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getgoodsList } from "@/apis/merchandise";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      curindex: 0, //当前索引
      show: false, //是否显示遮罩层
      infor: "", //商品信息
    };
  },
  computed: {
    getheight() {
      //获取右边div的所有高度
      let arr = []; //用来保存需要的高度{min:,max:,index:}
      let divindex = 0; //索引
      let totalHeight = 0; //累计的高度
      for (let obj of this.xdatalist) {
        let curdivheight = document.getElementById(obj.name).offsetHeight;
        //  console.log(curdivheight); 当前div的高度
        arr.push({
          min: totalHeight,
          max: totalHeight + curdivheight,
          index: divindex++,
        });
        totalHeight += curdivheight;
      }
      return arr;
    },
    xdatalist(){
      return this.$store.state.datalist
    }
    
  },
  methods: {
    //左联右
    clickleft(index, name) {
      // console.log(index,name);
      this.curindex = index;
      this.rightbs.scrollToElement(document.getElementById(name), 600);
    },
    //是否显示购物车蒙层
    showUp(item) {
      console.log(item);
      this.infor = item;
      this.show = true;
    },
    //点击减少数量
  clickred(id){
    this.$store.commit('changenum',{id,i:-1})
  },
      //点击增加数量
  clickadd(id){
 this.$store.commit('changenum',{id,i:+1})
  }
  },
  async created() {
    let res = await getgoodsList();
    for (let obj of res.data.goodsList) {
      for (let child of obj.foods) {
        child.num = 0;
        child.imgUrl= child.imgUrl.replace('172.16.7.232','192.168.0.102')
       
      }
    }
    this.$store.commit('initlist',res.data.goodsList)
    this.$nextTick(() => {
      new BScroll(".items-left", { click: true });
      this.rightbs = new BScroll(".items-right", { click: true, probeType: 3 });
      this.rightbs.on("scroll", ({ y }) => {
        let _y = Math.abs(y); //y轴转正数方便判断
        //console.log(_y,this.getheight);  //获取此DOM元素的高度,y轴高度,高度的数组
        for (let obj of this.getheight) {
          if (_y >= obj.min && _y < obj.max) {
            this.curindex = obj.index;
            break;
          }
        }
      });
    });
  },
};
</script>

<style lang="less" scoped>
.items {
  display: flex;
  flex: 1;
  overflow: hidden;
  .items-left {
    width: 100px;
    overflow: scroll;
    .list {
      padding: 10px 5px;
      background-color: #f7f8fa;
      text-align: center;
    }
  }
  .items-right {
    flex: 1;
    overflow: scroll;
    > div {
      p {
        height: 35px;
        line-height: 35px;
        background: #f7f8fa;
        padding: 3px 15px;
      }
      > div {
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
.fs14 {
  font-size: 14px;
}
.mb5 {
  margin-bottom: 5px;
}
.items .items-left .selected {
  background-color: #fff;
}
.shoping-cart {
  background-color: #fdc203;
  padding: 8px;
  border-radius: 17px;
  font-size: 14px;
  color: #333;
}
.gooddesc {
  margin-top: 20px;
  background: #fff;
  width: 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #333;
}

.block {
  width: 80%;
  // height: 120px;
  background-color: #fff;
  padding: 15px;
}
.btnnum {
  border-radius: 50%; 
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
  height: 20px;
  width: 20px;
}
.btnumleft{
  border: 1px solid #ABABAB;
  box-sizing: border-box;
}
.btnumright{
  background: #ffc300;
 
}
</style>